<template>
  <div>
      <h4>汽车信息一览</h4>
      <table border="1" width="600" cellspacing="0">
        <thead><tr><th>编号</th><th>品牌</th><th>单价</th><th>产地</th><th>操作</th></tr></thead>
     
        <tbody>
          <tr v-for="car in cutBean.list" :key="car.id">
             <td>{{car.id}}</td>
             <td>{{car.type}}</td>
             <td>{{car.price}}</td>
             <td>{{car.address}}</td>
             <td>
               <input type="button" value="删除" @click="del(car.id)"/>
               <input type="button" value="修改" @click="findById(car)"/>
             </td>
          </tr>
        </tbody>
      </table>

      <a href="javascript:void(0)" style="margin-left:10px"
       v-for="n in cutBean.pages" :key="n" @click="pageClick(n)">{{n}}</a>

       <div>
          品牌：<input type="text" v-model="param.type"><br>
          起始价格：<input type="text" v-model="param.startPrice"><br>
          结束价格：<input type="text" v-model="param.endPrice"><br>
          <input type="button" value="查找" @click="pageClick(1)"/>
       </div>
  </div>
</template>

<script>
export default {
    props:["cutBean"],
    data(){
      return {
        param:{pageNO:1}
      }
    },
    methods:{
       pageClick(pn){
         this.param.pageNO = pn;
         this.$emit("find",this.param);
      },
      async del(id){
          var info = await this.ajax.getSubmit("/project/car/del",{"id":id});
          if(info =="ok"){
            this.param.pageNO = 1;
            this.$emit("find",this.param);
          }
      },
      findById(car){
          this.$emit("setCar",car);
      }
    }
}
</script>

<style>

</style>